<template>
    <div class="bill-page">
        <back title="我的账单"></back>
        <div class="bill-content">
            <div class="my-money">
                <div class="title">当前余额</div>
                <div class="number">{{balance || '0.00'}}</div>
                <button type="button" class="cash" @click="$router.push(`/cash`)">立即提现</button>
            </div>
            <div class="bill-list">
                <nodata v-if="billData.length < 1"></nodata>
                <div class="item" v-else v-for="(item,index) in billData" :key="index">
                    <div class="title">{{item.sub_type}}</div>
                    <div class="times">{{item.create_time}}</div>
                    <div class="money">{{item.type == 'outgo' ? '-' : '+' }}{{item.amount}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="stylus">
.bill-page{
    width 100%
    height 100%
    padding-top 50px
    .bill-content{
        height 100%
        overflow-y auto
    }
    .my-money{
        height 80px
        background-image: linear-gradient(to right , #3b79e7, #3563db);
        font-size 14px
        color #fff
        padding 0 20px
        position relative
        .title{
            padding 12px 0
            font-size 18px
        }
        .number{
            font-size 24px
            font-weight 600
            color #ffb600
        }
        .cash{
            position absolute
            top 20px
            right 20px
            font-size 14px
            color #fff
            border 1px solid #fff
            background transparent
            border-radius 50px
            padding 3px 10px
            outline none
        }
    }
    .bill-list{
        .item{
            font-size 14px
            position relative
            padding 10px
            border-bottom 1px solid #f4f4f4
            .title{
                font-size 14px
                padding-bottom 10px
            }
            .times{
                font-size 12px
            }
            .money{
                position absolute
                top 10px
                right 10px
            }
        }
    }
}
</style>

<script>
export default {
    data(){
        return {
            billData:'',
            balance:'0.00'
        }
    },
    created(){
        this.myBill();
        this.myBalance()
    },
    methods:{
        myBill(){
            this.$http.get(`/MyInfo/myBill`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.billData = res.data.trans
                }
            })
        },
        myBalance(){
            this.$http.get(`/MyInfo/myBalance`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.balance = res.data.myBalance
                }
            })
        }
    }
}
</script>
